<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D动画演示</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 300px;
				height: 300px;
				margin: 200px auto;
				perspective: 800px;
				position: relative;
			}
			.content {
				list-style: none;
				width: 300px;
				height: 300px;
				margin: 200px auto;
				transform: rotateX(-180deg) rotateY(-180deg);
			}
			.content:hover {
				transform-style: preserve-3d;
				animation: run 4s infinite;
			}
			@keyframes run {
				0% {
					transform: rotateX(-180deg) rotateY(-180deg);
				}
				100% {
					transform: rotateX(180deg) rotateY(180deg);
				}
			}
			.content div {
				left: 0;
				top: 0;
				width: 300px;
				height: 300px;
				position: absolute;
				text-align: center;
				line-height: 300px;
				font-size: 32px;
				opacity: 0.8;
			}
			.content div:nth-child(1) {
				background: #00FFFF;
				transform: translateZ(150px);
				transition: 2s all;
			}
			.content:hover div:nth-child(2) {
				background: #FFA500;
				transform: translateZ(-150px);
				transition: 2s all;
			}
			.content:hover div:nth-child(3) {
				background: #FFC0CB;
				transform: translateX(-150px) rotateY(-90deg);
				transition: 2s all;
			}
			.content:hover div:nth-child(4) {
				background: #FFD700;
				transform: translateX(150px) rotateY(90deg);
				transition: 2s all;
			}
			.content:hover div:nth-child(5) {
				background: skyblue;
				transform: translateY(-150px) rotateX(90deg);
				transition: 2s all;
			}
			.content:hover div:nth-child(6) {
				background: #8A2BE2;
				transform: translateY(150px) rotateX(-90deg);
				transition: 2s all;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">
				<div class="div1">1</div>
				<div class="div2">2</div>
				<div class="div3">3</div>
				<div class="div4">4</div>
				<div class="div5">5</div>
				<div class="div6">6</div>
			</div>
		</div>
	</body>
</html>
